<template>
    <div>
        <header>
            <i class="iconfont icon-a-tuoyuanxingtuoyuanxingtuoyuanxingmengbanbeifen"></i>
            <section>
                <i class="iconfont icon-saoyisao"></i>
                <i class="iconfont icon-shezhi" @click="gotoSettings"></i>
            </section>
        </header>
        <main>

            <section class="avater">
                <img alt=""
                     src="https://img2.baidu.com/it/u=1442142732,789079931&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">
            </section>
            <section class="part">
                <p style="padding-left: 10px">{{ myStore.messageOne }}</p>
                <article>
                    <p>{{ myStore.attention }}</p>
                    <p>{{ myStore.fans }}</p>
                    <p>{{ myStore.release }}</p>
                    <p>{{ myStore.collect }}</p>
                </article>

            </section>
            <i class="iconfont icon-xiangyoujiantou"></i>
        </main>
        <footer>
            <article class="partOne">
            <span>
                <i class="iconfont icon-chongdianzhuang_chongdiandingdan"></i>
                充电订单
            </span>
                <span>
                <i class="iconfont icon-cheliangdingdan"></i>
                车辆订单
            </span>
                <span>
                <i class="iconfont icon-shangchengdingdan-my"></i>
                商城订单
            </span>
                <span>
                <i class="iconfont icon-quanbudingdan"></i>
                全部订单
            </span>
            </article>
            <article class="partTwo">
                <h1>
                实用工具
                </h1>
                <section>
                    <span>
                    <i class="iconfont icon-xinyuandan"></i>
                        心愿单
                        </span>
                    <span>
                    <i class="iconfont icon-shijiahangcheng"></i>
                        试驾行程
                        </span>
                    <span>
                    <i class="iconfont icon-neirongchuangzuo"></i>
                        趣创作
                        </span>
                    <span>
                    <i class=" iconfont icon-aislogo"></i>
                        AI涂装
                        </span>
                </section>
                <section>
                    <span>
                        <i class="iconfont icon-qianbao1"></i>
                        钱包
                    </span>
                    <span>
                        <i class="iconfont icon-youhuiquan1"> </i>
                        优惠券
                    </span>
                    <span>
                        <i class="iconfont icon-gongju"></i>
                        工具箱
                    </span>
                    <span>
                        <i class="iconfont icon-quanyi"></i>
                        权益中心
                    </span>
                </section>
                <section>
                    <span>
                        <i class="iconfont icon-huodongzhongxin"></i>

                        活动中心
                    </span>
                    <span>
                        <i class="iconfont icon-zaixiankefu"></i>
                        在线客服
                    </span>
                    <span>
                        <i class="iconfont icon-kefurexianxianxing "></i>
                        400热线
                    </span>
                    <span>
                        <i class="iconfont icon-cheliang"></i>
                        绑定车辆
                    </span>
                </section>
                <section>
                    <span>
                        <i class="iconfont icon-wodejiazhuang"></i>
                        我的家桩
                    </span>
                    <span>
                        <i class="iconfont icon-a-203jianyixiangguanli"></i>
                        建议箱
                    </span>
                    <span>
                        <i class="iconfont icon-a-aikefu_huaban1_huaban1"></i>
                        AI机器人
                    </span>
                    <span>
                        <i class="iconfont icon-shumajiadianleimu"></i>
                        摄影相机
                    </span>
                </section>
            </article>
        </footer>

    </div>
    <Bottom class="bottom"/>
</template>

<script setup>
import Bottom from "@/components/Bottom/Bottom.vue";
import Main from "@/App.vue";
import {useMyStore} from "@/stores/myStore.ts";
import {useRouter} from "vue-router";
const router=useRouter()

const gotoSettings=()=>{
    router.push('/setting')
}
// import router from "@/router/index.ts";

const myStore = useMyStore()
</script>

<style lang="scss" scoped>
header {
  //position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;

  section {
    width: 100px;
    display: flex;
    justify-content: space-evenly;
  }
}

main {

  display: flex;
  justify-content: space-around;

  i {
    margin-top: 65px;
  }

  .avater {
    overflow: hidden;

    //display: block;
    width: 2.4rem;
    height: 2.4rem;
    margin: 1rem auto 0.77rem;
    border-radius: 50%;
    //overflow: hidden;

    img {

      width: 100%;
      height: 100%;
      //left: 25px;

    }
  }

  section {
    article {
      display: flex;
      justify-content: space-around;
      width: 200px;
    }
  }
}

.part {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 15px;
}

.iconfont {
  font-size: 25px;
  margin-left: 10px;
}

footer {
  .partOne {
    background-color: whitesmoke;
    border-radius: 8px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: space-around;

    span {
      width: 60px;
      height: 60px;

      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
  }

  .partTwo {
    display: flex;
    flex-direction: column;
      height: 250px;
    justify-content: space-between;
      h1{
          margin-top: 30px;
          margin-left: 60px;
      }
      section{
          display: flex;
          justify-content: space-evenly;
          span{
              width: 60px;
              height: 60px;
              display: flex;
              flex-direction: column;
              justify-content: center;

          }
      }
  }

}
</style>